<template>
	<view class="container">
		<view class="header">
			<text class="title">个性签名</text>
		</view>
		<view class="content">
			<textarea class="signature-input" placeholder="简单自我介绍，让你更受欢迎..." v-model="signature"
				maxlength="100"></textarea>
			<text class="char-count">{{ signature.length }}/100字</text>
		</view>
		<button class="save-button" @click="saveSignature">保存</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"

	const signature = ref("")
	const saveSignature = () => {
		console.log('保存的个性签名:', this.signature);
	}
</script>

<style scoped>
	.container {
		/* padding: 20px; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		margin-bottom: 20px;
	}

	.title {
		font-size: 54rpx;
		margin-right: 420rpx;
	}

	.content {
		margin-bottom: 20px;
	}

	.signature-input {
		/* width: 100%; */
		height: 100px;
		padding: 10px;
		/* border: 1px solid #ccc; */
		border-radius: 5px;
		background-color: #FAFAFA;
		font-size: 16px;
		resize: none;
		margin-top: 100rpx;
	}

	.char-count {
		display: block;
		margin-top: 5px;
		margin-left: 480rpx;
		font-size: 14px;
		color: #666;
	}

	.save-button {
		/* width: 100%; */
		width: 600rpx;
		padding: 1rpx;
		background-color: #4996EB;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
	}

	.save-button:disabled {
		background-color: #ccc;
	}
</style>